import { observer } from 'mobx-react';
import { useEffect, useState } from 'react';
import { Search_Bg_Img } from '../../../images/SearchBg';
import StatisticStore from '../../../stores/StatisticStore';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import './WatchList.scss';
import { Movements } from '../../../services/WatchlistService';
import { useHistory } from 'react-router';
import { Img_Market } from '../../../images/Market';



export const WatchListPage = observer(() => {
    let history = useHistory();
    const [index, setIndex] = useState(0);
    useEffect(() => {
        StatisticStore.getWatchMarketlist();
    }, []);
    const tabs = ['涨幅榜', '跌幅榜'];
    var list: Movements[] = (index == 0 ? StatisticStore.markets?.top_movements?.top_10 : StatisticStore.markets?.top_movements?.last_10) || [];
    return (
        <div className="watchListPage">
            <header id="hero-overlay" className="hero-overlay wf-section" style={{ backgroundImage: `url('${Img_Market}')`, backgroundPositionY: '-50px', backgroundSize: '100%' }}>
                <div className="centered-container w-container">
                    <p className="paragraph-9">o•li Markets</p>
                    {/* <h1 className="heading-18">News, events and posts by the <br />o•li team</h1> */}
                </div>

                <img
                    src="https://uploads-ssl.webflow.com/5d1f262a719f5884d8fee399/5fc469839b588b8fabf84815_bottom_lightblue.svg"
                    loading="lazy" alt="" className="image-24" />
            </header>
            <div className="contentWrapper">
                <div className="menu">
                    {
                        tabs.map((t, i) => {
                            return <div className="title" key={i} style={{ color: index == i ? '#487bea' : 'black' }} onClick={() => {
                                setIndex(i);
                            }}>
                                {t}
                            </div>
                        })
                    }
                </div>
                <ul className="watchListContent">
                    {StatisticStore.marketLoading ? <div className="loading" style={{width:'100%',height:'500px'}}>
                        <Spin indicator={<LoadingOutlined style={{ fontSize: 40 }} />} />
                    </div> : list.map((item, idx) => {
                        return <div className="item" key={idx} onClick={() => {
                            window.scrollTo(0,0);
                            history.push(`/stockDetail/${item.symbol_id}`);
                        }}>
                            <div className="info">
                                <div className="icon">{item.symbol_id[0]}</div>
                                <div className="text">
                                    <div className="symbol">{item.symbol_id}</div>
                                    <div className="name">{item.symbol_name}</div>
                                </div>
                            </div>
                            <div className="price">
                                <div className="left">{item.price}</div>
                                <div className="right" style={{ color: index == 0 ? '#D0021B' : '#6bad10' }}>{(item.daily_return * 100).toFixed(2)}%</div>
                            </div>
                        </div>
                    })
                    }
                </ul>

            </div>
        </div >
    )
});